<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/employee.css">
    <script src="/lib/template-web.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/js/employee.js"></script>
</head>

<body>
    <div class="layui-card">
        <!-- 头部 -->
        <div class="layui-top">
            <form action="" id="form-search">
                <div class="layui-form-item layui-inline spj_header">
                    <input type="text" placeholder="请输入员工姓名" class="layui-input" id="ipt" name="searching">
                    <button id="searchE">搜索</button>
                    <div class="zhan"></div>
                    <button class="layui-btn layui-btn-warm addEmployee" style="margin-left: 20px;">+&nbsp;添加员工</button>
                </div>
            </form>
        </div>

        <!-- 身体 -->
        <table class="layui-table" lay-even lay-skin="nob">
            <colgroup>
                <col width="250" />
                <col width="250" />
                <col width="250" />
                <col width="250" />
                <col width="200" />
            </colgroup>
            <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>账号</th>
                    <th>手机号</th>
                    <th>账号状态</th>
                    <th class="jntm">操作</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td class="JSa">
                        <a type="button" class="blueBug  btnUpdate">编辑</a>&nbsp;&nbsp;&nbsp;
                        <a type="button" class="blueBug btnDisable">禁用</a>&nbsp;&nbsp;&nbsp;
                        <!-- <a type="button" class="delBut btnStart">启用</a> -->
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页区域 -->
        <div id="pageBox" style="text-align: center;"></div>
    </div>



    <!-- 增加员工 -->
    <script type="text/html" id="demo">
    <form class="layui-form" id="form-add">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <br><br>
            <div class="layui-input-block" style="margin-left:0;">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span id="xing">*</span>账号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" placeholder="请输入账号" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span id="xing">*</span>员工姓名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入员工姓名" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span id="xing">*</span>手机号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单选框:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男">
                        <input type="radio" name="sex" value="女" title="女" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span id="xing">*</span>身份证号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="idNumber" placeholder="请输入身份证号" autocomplete="off"
                            class="layui-input" />
                    </div>
                </div>
                <hr>
                <div class="layui-form-item select">
                    <div class="layui-input-block">
                        <button class="layui-btn cancle">取消</button>
                        <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                        <button class="layui-btn layui-btn-primary" id="btnLoading">保存并继续添加</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </script>




    <!-- 模板引擎 -->
    <script type="text/html" id="tpl-employyee">
        {{each records}}
        <tr>
            <td>{{$value.name}}</td>
            <td>{{$value.username}}</td>
            <td>{{$value.phone}}</td>
            <!-- <td data-id="{{$value.status}}">{{if($value.status===1)}}正常{{else if($value.status===0)}}异常{{/if}}</td> -->
            <td class="statusone ">正常</td>
            <td class="statustwo normal">异常</td>
            <td class="JSa">
                <a type="button" class="blueBug  btnUpdate" data-id="{{$value.id}}" >编辑</a>&nbsp;&nbsp;&nbsp;
                <a type="button" class="delBut btnDisable" data-id="{{$value.id}}">
                <!-- {{$value.status==1?'禁用':'启用'}} -->
                禁用
                </a>
                <a type="button" class="delBut1 btnDisable normal" data-id="{{$value.id}}">
                <!-- {{$value.status==1?'禁用':'启用'}} -->
                启用
                </a>
                <!-- <a type="button" class="delBut btnStart" data-id="{{$value.id}}">启用</a> -->
            </td>
        </tr>
        {{/each}}
    </script>


    <!-- 本地存储的渲染 -->
    <script type="text/html" id="lpt">
        {{each}}
        <tr data-idNub = {{$value}}>
            <td>{{$value.name}}</td>
            <td>{{$value.username}}</td>
            <td>{{$value.phone}}</td>
            <td>{{if($value.status===1)}} 正常{{else if($value.status===0)}}禁用{{/if}}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs btn-edit"
                    style="color: #00a0ff; background-color: #fff" data-id='{{$value.id}}' data-name="{{$value.name}}" data-username='{{$value.username}}' data-phone='{{$value.phone}}' data-idNumber="{{$value.idNumber}}">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-stop"
                    style="color: #ff6263; background-color: #fff;" >禁用</button>
            </td>
        </tr>
        {{/each}}  
    </script>


</body>

</html>